<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物网站 - 首页</title>
  <link rel="stylesheet" href="./css/home.css">
  <script src="./js/home.js"></script>
  <style>
    /* 重置默认样式 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h1 {
      font-size: 30px;
      color: #333;
    }

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li {
      margin-right: 10px;
    }

    nav ul li button {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    /* nav ul li button.active, */
    nav ul li button:hover {
      background-color: blue;
      color: white;
    }

    nav ul li button.active:hover {
      background-color: blue;
    }

    nav ul li button:not(.active):hover {
      background-color: blue;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    /* 购物车、个人主页连接的样式 */
    nav ul li a:hover {
      background-color: #e6e6e6;
    }

    main {
      text-align: center;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      margin-bottom: 20px;
    }

    h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      color: #666;
      margin-bottom: 10px;
    }

    .cta-button {
      display: inline-block;
      padding: 12px 24px;
      background-color: #333;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      transition: background-color 0.3s ease;
    }

    .cta-button:hover {
      background-color: #666;
    }

    footer {
      text-align: center;
      color: #999;
      font-size: 14px;
    }



    /* 购物车商品列表容器 */
    #ListOfProducts {
      display: flex;
      flex-wrap: wrap;
    }

    /* 商品项 */
    .product {
      width: 200px;
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }

    /* 商品图片 */
    .product-image {
      width: 100%;
      height: auto;
    }

    /* 商品信息 */
    .product-info {
      margin-top: 10px;
    }

    /* 商品名称 */
    .product-info h3 {
      font-size: 16px;
      margin: 0;
    }

    /* 商品描述 */
    .product-info p {
      font-size: 14px;
      margin: 0;
    }

    /* 商品价格 */
    .product-price {
      font-size: 14px;
      margin-top: 10px;
    }

    /* 商品数量 */
    .product-count {
      font-size: 14px;
      margin-top: 5px;
    }

    .cart-list {
      border: 1px solid #ccc;
      padding: 10px;
    }

    .price-display {
      font-weight: bold;
      margin-top: 10px;
    }

    .submit-button {
      background-color: #f44336;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin-top: 10px;
      cursor: pointer;
    }


    .price-display {
      font-weight: bold;
      margin-top: 10px;
    }

    .submit-button {
      background-color: blue;
      color: #fff;
      border: none;
      padding: 10px 20px;
      margin-top: 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="container">
    <!-- 头部导航栏 -->
    <header>
      <h1>购物网站</h1>
      <nav>
        <ul>
          <li><button class="active" type="button" onclick="handleButtonClick(0)">推荐</button></li>
          <li><button type="button" onclick="handleButtonClick(1)">衣物</button></li>
          <li><button type="button" onclick="handleButtonClick(2)">食品</button></li>
          <li><button type="button" onclick="handleButtonClick(3)">化妆品</button></li>
          <li><button type="button" onclick="handleButtonClick(4)">电子产品</button></li>
          <li><button type="button" onclick="handleButtonClick(5)">生活用品</button></li>
        </ul>
      </nav>
      <nav>
        <ul>
          <li><a href="cart.html">购物车</a></li>
          <li><a href="Personal.html">个人主页</a></li>
        </ul>
      </nav>
    </header>
    <!-- 主要内容区域 -->
    <main>
      <!-- 动态展示购物车列表页面 -->
      <div id="ListOfProducts" class="cart-list">

      </div>

      <!-- 显示总价格 -->
      <p id="totalPrice" class="price-display">总价格: $0.00</p>

      <!-- 提交订单按钮 -->
      <button id="submitButton" class="submit-button">提交订单</button>
    </main>

    <!-- 底部版权信息 -->
    <footer>
      <p>&copy; 2023 购物网站. All rights reserved.</p>
    </footer>
  </div>

  <!-- 这样才可以发送ajax请求 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // 跳转值指定商品列表
    function handleButtonClick(index) {
      var url = 'home.html?index=' + encodeURIComponent(index);
      window.location.href = url;
    }

    // 获取 URL 中的参数值
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    const pid = urlParams.get('pid');


    //如何进入购物车，进入购物车有两种方法

    /*一、通过商品列表点击购买（有参数）
      1. 首先要完成添加商品到购物车
         点击购买按钮之后，这个页面会获取商品id,后端创建订单对象（单例模式？），设置cookie
      2 .其次要完成加载购物测列表
         前端发送请求，请求包含cookie,后端查询数据返回给前端
         前端动态显示页面
    */

    /*二、通过点击购物车按钮（无参数）
      1. 此时只需要完成加载购物车列表的功能
         前端发送请求，请求包含cookie,后端查询数据返回给前端
         前端动态显示页面
    */


    /*
    Q:我们的购物车应该存放在哪里？
    A:cookie中
    OrderForm是订单，OrderDetails商品条目。
    一个订单包含很多商品条目。
    把OrderForm存储在cookie中
    

    怎么提交订单？？？
    前端发起请求，请求中包含cookie,后端根据cookie进行数据持久化
    */



    //===============================================
    //=========初始化页面，动态加载购物测列表===========
    //===============================================

    //一个购物车列表包含多条商品条目
    //每个商品条目包含（商品图片，商品名称，商品描述，商品价格，【-】，商品数目，【+】 ）
    //最终还有一个提交订单按钮
    // 获取购物车并展示
    // 获取购物车并展示
    function getCart2() {
      jQuery.ajax({
        type: "get",
        url: "get_cart",
        success: function (body) {
          if (body.code == 200) {
            if (body.data == null) {
              // 购物车为空，显示提示信息和商城连接
              document.getElementById('ListOfProducts').innerHTML = "<p>购物车暂无商品，请<a href='home.html'>返回商城购物</a></p>";
            } else {



              // 购物车不为空，动态生成商品列表
              var productListDiv = document.getElementById('ListOfProducts');
              var productsList = body.data.productsList;

              var ul = document.createElement('ul');
              productsList.forEach(function (product) {
                var li = document.createElement('li');
                li.innerHTML = `
              <img src="${product.image_url}" alt="${product.name}">
              <p>${product.name}</p>
              <p>价格：${product.price}元</p>
              <p>数量：${product.count}</p>
            `;
                ul.appendChild(li);
              });

              productListDiv.appendChild(ul);
            }
          } else {
            alert("获取失败！");
          }
        }
      });
    }

    // getCart2();


    // 获取购物车并展示
    function getCart() {
      jQuery.ajax({
        type: "get",
        url: "get_cart",
        success: function (body) {
          if (body.code == 200) {
            if (body.data == null) {
              // 购物车为空，显示提示信息和商城连接
              document.getElementById('ListOfProducts').innerHTML = "<p>购物车暂无商品，请<a href='home.html'>返回商城购物</a></p>";
              return;
            }

            var productsList = body.data.productsList;
            var listOfProducts = jQuery("#ListOfProducts");
            listOfProducts.empty(); // 清空购物车列表容器

            if (productsList.length === 0) {
              // 购物车无商品，显示提示信息和商城链接
              var noProductMessage = jQuery("<p>").text("购物车暂无商品，请返回商城继续购物");
              var shoppingLink = jQuery("<a>")
                .attr("href", "商城链接地址")
                .text("返回商城");
              listOfProducts.append(noProductMessage);
              listOfProducts.append(shoppingLink);
            } else {
              // 动态生成购物车商品列表
              for (var i = 0; i < productsList.length; i++) {
                var product = productsList[i];

                // 创建商品元素
                var productDiv = jQuery("<div>");
                productDiv.addClass("product");

                // 左部分 - 商品图片
                var imageElement = jQuery("<img>");
                imageElement.attr("src", product.image_url);
                imageElement.addClass("product-image");
                productDiv.append(imageElement);

                // 中部分 - 商品信息
                var infoDiv = jQuery("<div>");
                infoDiv.addClass("product-info");

                var nameElement = jQuery("<h3>").text(product.name);
                infoDiv.append(nameElement);

                var descriptionElement = jQuery("<p>").text(product.productDescription);
                infoDiv.append(descriptionElement);

                productDiv.append(infoDiv);

                // 右部分 - 商品价格和数量
                var priceElement = jQuery("<p>").text("价格: " + product.price);
                priceElement.addClass("product-price");
                productDiv.append(priceElement);

                var countElement = jQuery("<p>").text("数量: " + product.count);
                countElement.addClass("product-count");
                productDiv.append(countElement);

                listOfProducts.append(productDiv);

              }

              $('#totalPrice').text(body.data.price);

            }
          } else {
            alert("获取失败！");
          }
        },
      });
    }

    getCart();



    $(document).ready(function () {
      $("#submitButton").click(function () {
        tijiao();
      });
    });
    function tijiao() {

      $.ajax({
        type: 'get',
        url: 'tijiao',
        success: function (body) {
          if (body.code == 200) {
            alert("订单已提交")
            //刷新当前页面
            location.reload(); // 这行代码将会重新加载当前页面
          } else {
            alert(body.msg)
          }
        },
        error: function () {
          console.error('Error: Login request failed');
        }
      });
    }
  </script>
</body>

</html>